<template>
  <div class="panel-box">
    <div class="">
      <Title title="航标统计"></Title>
      <piei-bar style="height: 180px"></piei-bar>
    </div>
    <div>
      <Title title="船舶调度"></Title>
      <div class="flex">
        <ht-bg-bar unit="工作船统计" style="height: 130px; width: 100%" :result-data="workShip"></ht-bg-bar>
      </div>
      <div class="flex" style="border-top: 1px dashed rgba(255, 255, 255, 0.3)">
        <ht-pie style="height: 150px; width: 100%; margin-top: 10px;" :color="['#fecc37', '#3ae6ff', '#a3f3b5']" :result-data="defaultShip"
          unit="社会船舶统计"></ht-pie>
      </div>
    </div>
  </div>
</template>
<script>
import PieiBar from "./PieiBar.vue";
import HtBgBar from "./HtBgBar.vue";
import HtPie from "./HtPie.vue";
import Title from "./Title.vue";
export default {
  name: "L1Panel",
  components: { PieiBar, HtBgBar, Title, HtPie },
  props: {},
  data() {
    return {
      workShip: [
        {
          name: "工作船",
          data: [
            {
              name: "总数",
              value: 324
            },
            {
              name: "出航数",
              value: 124
            },
            {
              name: "设备装备数",
              value: 124
            }
          ]
        }
      ],
      defaultShip: [
        {
          name: "社会船",
          data: [
            {
              name: "总数",
              value: 122
            },
            {
              name: "在航数",
              value: 122
            },
            {
              name: "停航数",
              value: 122
            }
          ]
        }
      ]
    };
  },
  computed: {},
  created() {
    this.getShipTotal();
  },
  mounted() { },
  methods: {
    getShipTotal() {
    }
  }
};
</script>
<style lang="less" scoped>
.panel-box {
  width: 100%;
  // border: 1px solid red;
  height: 100%;
}

.flex {
  display: flex;
  width: 100%;

  .flex-1 {
    flex: 1;
  }
}

.bar-num {
  color: #fff;
  line-height: 2em;
  text-align: left;
  padding: 2em 0 0 1em;

  span {
    font-size: 20px;
    font-family: "YouSheBiaoTiHei";
    padding: 0 5px;
  }

  label {
    width: 6em;
    text-align: justify;
    list-style: none;
    text-align-last: justify;
    display: inline-block;
  }
}

.title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  margin-top: -20px;
}
</style>
  